<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial=1.0,minmum-scale=1.0,maximum-scale=1.0,user-scalable=no,viewport-fit=cover">
		<title>vue-router嵌套路由</title>
		<style type="text/css">
			*{
				margin:0;
				padding:0;
			}
			html,body{
				height:100%;
				width:100%;
			}
			hr{
				margin:20px 0;
			}
			.link{
				height:40px;
				line-height:40px;
				color:#666;
				text-decoration:none;
				display:block;
				width:100px;
				text-align:center;
				background-color:black;
				color:white;
				margin:10px;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<router-link to="/user" class="link">User</router-link>
			<router-link to="/register"  class="link">Register</router-link>
			<hr>
			<router-view></router-view>
		</div>
		
		
		<script src="Vue.js"></script>
		<script src="vue-router.js"></script>
		<script>
			/* 
			 vue-router嵌套路由
			 通过children属性(数组)，为/register添加子路由规则
			 */
			
			const User = {
				template:`<h3>User组件内容显示区域</h3>`
			}
			const Register = {
				template:`
				<div>
				<h3>Register组件内容显示区域</h3>
				<hr>
				<router-link to="/register/tab1"  class="link">Tab1</router-link>
				<router-link to="/register/tab2"  class="link">Tab3</router-link>
				<hr>
				<router-view><router-view>
				</div>
			
				`
			}
			const Tab1 = {
				template:`<h3>Tab1组件内容展示区域</h3>`
			}
			const Tab2 = {
				template:`<h3>Tab2组件内容展示区域</h3>`
			}
			
			
			const router = new VueRouter({
				routes:[
					{
						path:"/",
						redirect:"/user"
					},
					{
						path:"/user",
						component:User
					},
					{
						path:"/register",
						component:Register,
						//通过children属性(数组)，为/register添加子路由规则
						children:[
							{
								path:"/register/tab1",
								component:Tab1
							},
							{
								path:"/register/tab2",
								component:Tab2
							}
						]
					}
				]
			})
			
			let vm = new Vue({
				el:"#app",
				data:{},
				router:router
			})
		</script>
	</body>
</html>
